<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    JavaScript 计时事件
    通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
    在 JavaScript 中使用计时事件是很容易的，两个关键方法是:
    setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
    setTimeout() - 在指定的毫秒数后执行指定代码。 延时
-->
<button id="btn_interval">清除循环定时器</button>
<button id="btn_timeout">清除延时定时器</button>

<script>
    // 定义一个循环定时器
    // var timer_index = setInterval(function () {
    //     console.log('Hello')
    // }, 1000)
    // console.log('定时器索引', timer_index)

    // 定义延时定时器
    var timer_index2 = setTimeout(function () {
        console.log('hello Timeout ')
    }, 3000)

    // document.getElementById('btn_interval').onclick = function () {
    //     // 清除定时器
    //     clearInterval(timer_index)
    // }

    document.getElementById('btn_timeout').onclick = function () {
        // 清除定时器 延时定时器  停止操作需要再定时器执行之前
        clearTimeout(timer_index2)
    }
</script>

</body>
</html>